<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="static/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="static/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-admin.min.css">
    <!--  代码高亮  -->
    <link rel="stylesheet" href="lib/prismjs/themes/prism-okaidia.css">
    <title>bootstrap-admin</title>
</head>
<body>


<!--侧边栏-->
<div class="bsa-sidebar">
    <div class="bsa-sidebar-header">
        <img src="static/images/logo-icon.png" class="bsa-logo-icon" alt="logo-icon">
        <div class="bsa-logo-text">bootstrap-admin</div>
    </div>
    <div class="bsa-sidebar-body">
        <ul class="bsa-menu">
            <li>
                <a href="index.html">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children open">
                    <i class="bi bi-columns-gap"></i>UI组件
                </a>
                <ul>
                    <li>
                        <a href="component-card.html">卡片</a>
                    </li>
                    <li>
                        <a href="component-button.html">按钮</a>
                    </li>
                    <li>
                        <a href="component-accordion.html">手风琴</a>
                    </li>
                    <li>
                        <a href="component-alert.html">警告框</a>
                    </li>
                    <li>
                        <a href="component-badge.html">徽章</a>
                    </li>
                    <li>
                        <a href="component-breadcrumb.html">面包屑</a>
                    </li>
                    <li>
                        <a href="component-table.html">表格</a>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children open">表单</a>
                        <ul>
                            <li><a href="component-form-elements.html">基础元素</a></li>
                            <li><a href="component-form-validations.html">表单验证</a></li>
                            <li><a href="component-form-layouts.html" class="active">表单布局</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-html"></i>页面
                </a>
                <ul>
                    <li>
                        <a href="page-profile.html">个人资料</a>
                    </li>
                    <li>
                        <a href="page-timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="page-error.html">错误页面</a>
                    </li>
                    <li>
                        <a href="page-add.html">新增页面</a>
                    </li>
                    <li>
                        <a href="page-list.html">列表页</a>
                    </li>
                    <li>
                        <a href="page-blank.html">新页面</a>
                    </li>
                    <li>
                        <a href="page-login.html">登录页</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-js"></i>插件
                </a>
                <ul>
                    <li><a href="plugin-bootstrap-notify.html">通知插件</a></li>
                    <li><a href="plugin-bootstrap-dialog.html">弹层插件</a></li>
                    <li><a href="plugin-formvalidation.html">表单验证</a></li>
                    <li><a href="plugin-tempus-dominus.html">日期时间选择</a></li>
                    <li><a href="plugin-tinymce.html">富文本编辑器</a></li>
                    <li><a href="plugin-dropzone.html">文件上传</a></li>
                    <li><a href="plugin-croppie.html">头像裁剪</a></li>
                    <li><a href="plugin-ztree.html">树形组件</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-list-nested"></i>多级菜单
                </a>
                <ul>
                    <li><a href="javascript:">一级菜单</a></li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                            <li>
                                <a href="javascript:" class="has-children">二级菜单</a>
                                <ul>
                                    <li><a href="javascript:">三级菜单</a></li>
                                    <li>
                                        <a href="javascript:" class="has-children">三级菜单</a>
                                        <ul>
                                            <li><a href="javascript:">四级菜单</a></li>
                                            <li><a href="javascript:">四级菜单</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--头部导航-->
<div class="bsa-header">
    <div class="bsa-header-item bsa-mobile-sidebar-item">
        <i class="bi bi-list"></i>
    </div>
    <div class="bsa-header-item bsa-search-bar-item">
        <form class="bsa-search-box" action="#">
            <input type="text" class="form-control bsa-search-input" name="keyword" aria-label="搜索关键词"
                   placeholder="搜索关键词">
            <button class="bsa-search-btn" type="submit"><i class="bi bi-search"></i></button>
            <i class="bi bi-x bsa-search-close-icon"></i>
        </form>
    </div>
    <div class="bsa-header-item bsa-mobile-search-item">
        <i class="bi bi-search"></i>
    </div>
    <div class="bsa-header-item dropdown">
        <i class="bi bi-grid" data-bs-toggle="dropdown" role="button"></i>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">
            <div class="bsa-dropdown-menu-body">
                <div class="container-fluid">
                    <div class="row row-cols-3 g-3 p-3">
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-primary text-white"><i class="bi bi-bank"></i></div>
                            <div class="fs-6 mt-1 text-muted">银行</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-info text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用2</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用3</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用4</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用5</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用6</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="position-relative " data-bs-toggle="dropdown" role="button">
            <span class="bsa-num-count">99+</span>
            <i class="bi bi-bell"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">

            <div class="bsa-dropdown-menu-header d-flex align-items-center justify-content-between">
                <p class="bsa-dropdown-menu-title">通知列表</p>
                <a href="javascript:" class="bsa-dropdown-menu-all-read">全部设为已读</a>
            </div>

            <div class="bsa-dropdown-menu-body">
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-danger text-white"><i class="bi bi-cart"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新订单</h5>
                            <p class="bsa-media-text">您收到新的订单</p>
                            <p class="bsa-media-time small">10秒前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-success text-white"><i class="bi bi-people"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新增用户</h5>
                            <p class="bsa-media-text">100个新用户注册</p>
                            <p class="bsa-media-time small">30分钟前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-warning text-white"><i class="bi bi-chat-square-dots"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新的评论</h5>
                            <p class="bsa-media-text">您收到客户新的评论</p>
                            <p class="bsa-media-time small">2天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-primary text-white"><i class="bi bi-cart-check"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">订单已经发货</h5>
                            <p class="bsa-media-text">您的商品已在运送途中</p>
                            <p class="bsa-media-time small">3天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-secondary text-white"><i class="bi bi-person-workspace"></i>
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新的同事</h5>
                            <p class="bsa-media-text">新增3位后台管理工作成员</p>
                            <p class="bsa-media-time small">1周前</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="bsa-dropdown-menu-footer d-flex align-items-center justify-content-center">
                <a href="javascript:" class="bsa-dropdown-view-all">查看所有通知</a>
            </div>

        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="position-relative " data-bs-toggle="dropdown" role="button">
            <span class="bsa-num-count">9</span>
            <i class="bi bi-chat-left"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">
            <div class="bsa-dropdown-menu-header d-flex align-items-center justify-content-between">
                <p class="bsa-dropdown-menu-title">消息列表</p>
                <a href="javascript:" class="bsa-dropdown-menu-all-read">全部设为已读</a>
            </div>
            <div class="bsa-dropdown-menu-body">
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11110-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">青蛙王子</h5>
                            <p class="bsa-media-text">请给我开通新的角色权限~</p>
                            <p class="bsa-media-time small">16秒前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11131.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">骑着蜗牛看世界</h5>
                            <p class="bsa-media-text">兄弟，晚上一起去喝几杯</p>
                            <p class="bsa-media-time small">40分钟前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11114.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">小刘</h5>
                            <p class="bsa-media-text">订单已经发货完毕</p>
                            <p class="bsa-media-time small">7天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11126-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">小王</h5>
                            <p class="bsa-media-text">晚上一起去公园走走呀~</p>
                            <p class="bsa-media-time small">8天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11112-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">人生如茶</h5>
                            <p class="bsa-media-text">今天晚上大家留下来开个产品会议</p>
                            <p class="bsa-media-time small">2周前</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="bsa-dropdown-menu-footer d-flex align-items-center justify-content-center">
                <a href="javascript:" class="bsa-dropdown-view-all">查看所有消息</a>
            </div>
        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="bsa-user-info" data-bs-toggle="dropdown" role="button">
            <img src="static/images/avatar.jpg" class="bsa-user-img" alt="用户头像">
            <div class="bsa-user-detail">
                <div class="bsa-user-name">欲饮琵琶码上催</div>
                <div class="bsa-user-role">超级管理员</div>
            </div>
        </div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-person"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-gear"></i>设置</a></li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-box-arrow-right"></i>退出登录</a></li>
        </ul>
    </div>
</div>


<!--内容区域-->
<div class="bsa-main-wrapper">
    <div class="bsa-main-content">
        <div class="container-fluid">
            <div class="row row row-cols-1 row-cols-md-1 row-cols-lg-2 row-cols-xl-2 g-3">
                <div class="col">
                    <h5 class="card-title">基本表单布局</h5>
                    <div class="dropdown-divider mb-3"></div>
                    <div class="bsa-component">
                        <div class="card border-top border-0 border-4 border-primary">
                            <div class="card-body p-5">
                                <div class="card-title d-flex align-items-center">
                                    <div><i class="bi bi-person me-1 bsa-font-20 text-primary"></i>
                                    </div>
                                    <h5 class="mb-0 text-primary">用户注册</h5>
                                </div>
                                <hr>
                                <form class="row g-3">
                                    <div class="col-md-6">
                                        <label for="inputFirstName" class="form-label">First Name</label>
                                        <input type="email" class="form-control" id="inputFirstName">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputLastName" class="form-label">Last Name</label>
                                        <input type="password" class="form-control" id="inputLastName">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputEmail" class="form-label">Email</label>
                                        <input type="email" class="form-control" id="inputEmail">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputPassword" class="form-label">Password</label>
                                        <input type="password" class="form-control" id="inputPassword">
                                    </div>
                                    <div class="col-12">
                                        <label for="inputAddress" class="form-label">Address</label>
                                        <textarea class="form-control" id="inputAddress" placeholder="Address..."
                                                  rows="3"></textarea>
                                    </div>
                                    <div class="col-12">
                                        <label for="inputAddress2" class="form-label">Address 2</label>
                                        <textarea class="form-control" id="inputAddress2" placeholder="Address 2..."
                                                  rows="3"></textarea>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputCity" class="form-label">City</label>
                                        <input type="text" class="form-control" id="inputCity">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="inputState" class="form-label">State</label>
                                        <select id="inputState" class="form-select">
                                            <option selected="">Choose...</option>
                                            <option>...</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="inputZip" class="form-label">Zip</label>
                                        <input type="text" class="form-control" id="inputZip">
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="gridCheck">
                                            <label class="form-check-label" for="gridCheck">Check me out</label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary px-5">Register</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <h5 class="card-title">携带图标</h5>
                    <div class="dropdown-divider mb-3"></div>
                    <div class="bsa-component">
                        <div class="card border-top border-0 border-4 border-danger">
                            <div class="card-body p-5">
                                <div class="card-title d-flex align-items-center">
                                    <div><i class="bi bi-person me-1 bsa-font-20 text-danger"></i>
                                    </div>
                                    <h5 class="mb-0 text-danger">用户注册</h5>
                                </div>
                                <hr>
                                <form class="row g-3">
                                    <div class="col-md-6">
                                        <label for="inputLastName1" class="form-label">First Name</label>
                                        <div class="input-group"><span class="input-group-text bg-transparent"><i
                                                class="bi bi-person"></i></span>
                                            <input type="text" class="form-control border-start-0" id="inputLastName1"
                                                   placeholder="First Name">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputLastName2" class="form-label">Last Name</label>
                                        <div class="input-group"><span class="input-group-text bg-transparent"><i
                                                class="bi bi-person"></i></span>
                                            <input type="text" class="form-control border-start-0" id="inputLastName2"
                                                   placeholder="Last Name">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="inputPhoneNo" class="form-label">Phone No</label>
                                        <div class="input-group"><span class="input-group-text bg-transparent"><i
                                                class="bi bi-phone"></i></span>
                                            <input type="text" class="form-control border-start-0" id="inputPhoneNo"
                                                   placeholder="Phone No">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="inputEmailAddress" class="form-label">Email Address</label>
                                        <div class="input-group"><span class="input-group-text bg-transparent"><i
                                                class="bi bi-envelope"></i></span>
                                            <input type="text" class="form-control border-start-0"
                                                   id="inputEmailAddress"
                                                   placeholder="Email Address">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="inputChoosePassword" class="form-label">Choose Password</label>
                                        <div class="input-group"><span class="input-group-text bg-transparent"><i
                                                class="bi bi-shield-lock"></i></span>
                                            <input type="text" class="form-control border-start-0"
                                                   id="inputChoosePassword"
                                                   placeholder="Choose Password">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="inputConfirmPassword" class="form-label">Confirm Password</label>
                                        <div class="input-group"><span class="input-group-text bg-transparent"><i
                                                class="bi bi-shield-lock"></i></span>
                                            <input type="text" class="form-control border-start-0"
                                                   id="inputConfirmPassword"
                                                   placeholder="Confirm Password">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="inputAddress3" class="form-label">Address</label>
                                        <textarea class="form-control" id="inputAddress3" placeholder="Enter Address"
                                                  rows="3"></textarea>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="gridCheck2">
                                            <label class="form-check-label" for="gridCheck2">Check me out</label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-danger px-5">Register</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <h5 class="card-title">登录布局示例</h5>
                    <div class="dropdown-divider mb-3"></div>
                    <div class="bsa-component">
                        <div class="card border-top border-0 border-4 border-dark">
                            <div class="card-body p-5">
                                <div class="card-title text-center"><i
                                        class="bi bi-person-circle text-dark bsa-font-50"></i>
                                    <h5 class="mb-5 mt-2 text-dark">用户登录</h5>
                                </div>
                                <hr>
                                <form class="row g-3">
                                    <div class="col-12">
                                        <label for="inputLastEnterUsername" class="form-label">用户名</label>
                                        <div class="input-group input-group-lg"><span
                                                class="input-group-text bg-transparent"><i
                                                class="bi bi-person"></i></span>
                                            <input type="text" class="form-control border-start-0"
                                                   id="inputLastEnterUsername" placeholder="请输入用户">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="inputLastEnterPassword" class="form-label">密码</label>
                                        <div class="input-group input-group-lg"><span
                                                class="input-group-text bg-transparent"><i
                                                class="bi bi-shield-lock"></i></span>
                                            <input type="text" class="form-control border-start-0"
                                                   id="inputLastEnterPassword" placeholder="请输入密码">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="gridCheck3">
                                            <label class="form-check-label" for="gridCheck3">记住我</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 text-end"><a href="javascript:">忘记密码</a>
                                    </div>
                                    <div class="col-12">
                                        <div class="d-grid">
                                            <button type="submit" class="btn btn-dark btn-lg px-5">
                                                <i class="bi bi-shield-lock me-2"></i>登录
                                            </button>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="col-12 text-center">
                                        <p class="mb-0">第三方账号登录 :</p>
                                    </div>
                                    <div class="col-12">
                                        <div class="d-grid gap-2">
                                            <button type="submit" class="btn btn-success btn-lg px-5"><i
                                                    class="bi bi-wechat"></i> 微信登录
                                            </button>
                                            <button type="submit" class="btn btn-light btn-lg px-5"><i
                                                    class="bi bi-github"></i> github登录
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <h5 class="card-title">水平布局表单</h5>
                    <div class="dropdown-divider mb-3"></div>
                    <div class="bsa-component">
                        <div class="card border-top border-0 border-4 border-info">
                            <div class="card-body">
                                <div class="border p-4 rounded">
                                    <div class="card-title d-flex align-items-center">
                                        <div><i class="bi bi-person me-1 bsa-font-20 text-info"></i>
                                        </div>
                                        <h5 class="mb-0 text-info">用户注册</h5>
                                    </div>
                                    <hr>
                                    <form action="#">
                                        <div class="row mb-3">
                                            <label for="inputEnterYourName" class="col-sm-3 col-form-label">Enter Your
                                                Name</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="inputEnterYourName"
                                                       placeholder="Enter Your Name">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label for="inputPhoneNo2" class="col-sm-3 col-form-label">Phone No</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="inputPhoneNo2"
                                                       placeholder="Phone No">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label for="inputEmailAddress2" class="col-sm-3 col-form-label">Email
                                                Address</label>
                                            <div class="col-sm-9">
                                                <input type="email" class="form-control" id="inputEmailAddress2"
                                                       placeholder="Email Address">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label for="inputChoosePassword2" class="col-sm-3 col-form-label">Choose
                                                Password</label>
                                            <div class="col-sm-9">
                                                <input type="email" class="form-control" id="inputChoosePassword2"
                                                       placeholder="Choose Password">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label for="inputConfirmPassword2" class="col-sm-3 col-form-label">Confirm
                                                Password</label>
                                            <div class="col-sm-9">
                                                <input type="email" class="form-control" id="inputConfirmPassword2"
                                                       placeholder="Confirm Password">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label for="inputAddress4" class="col-sm-3 col-form-label">Address</label>
                                            <div class="col-sm-9">
                                            <textarea class="form-control" id="inputAddress4" rows="3"
                                                      placeholder="Address"></textarea>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label for="inputAddress4" class="col-sm-3 col-form-label"></label>
                                            <div class="col-sm-9">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="gridCheck4">
                                                    <label class="form-check-label" for="gridCheck4">Check me
                                                        out</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-3 col-form-label"></label>
                                            <div class="col-sm-9">
                                                <button type="submit" class="btn btn-info px-5">Register</button>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
</div>

<!--调色板-->
<div class="bsa-switcher">

    <div class="bsa-switcher-toggler-btn">
        <div class="bsa-switcher-toggler-icon">
            <i class="bi bi-gear"></i>
        </div>
    </div>


    <div class="bsa-switcher-header">
        <h5 class="bsa-switcher-header-title">自定义主题</h5>
        <button type="button" class="btn-close text-reset bsa-switcher-toggler-btn"></button>
    </div>


    <div class="bsa-switcher-body">
        <h6 class="text-dark">头部颜色</h6>
        <hr>
        <div class="bsa-headercolor-wrap">

            <div class="row row-cols-auto g-3">
                <div class="col">
                    <div class="headercolor1"></div>
                </div>
                <div class="col">
                    <div class="headercolor2"></div>
                </div>
                <div class="col">
                    <div class="headercolor3"></div>
                </div>
                <div class="col">
                    <div class="headercolor4"></div>
                </div>
                <div class="col">
                    <div class="headercolor5"></div>
                </div>
                <div class="col">
                    <div class="headercolor6"></div>
                </div>
                <div class="col">
                    <div class="headercolor7"></div>
                </div>
                <div class="col">
                    <div class="headercolor8"></div>
                </div>
            </div>
        </div>

        <h6 class="text-dark">侧边栏颜色</h6>
        <hr>
        <div class="bsa-sidebarcolor-wrap">

            <div class="row row-cols-auto g-3">
                <div class="col">
                    <div class="sidebarcolor1"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor2"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor3"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor4"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor5"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor6"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor7"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor8"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="lib/prismjs/prism.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="src/bootstrap-admin.js"></script>


</body>
</html>